<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @import url(http://fonts.useso.com/css?family=Lato:100,300,700);
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Lato', sans-serif;
        }
        .clear {
            width: 100px;
            height: 40px;
            border-radius: 10px;
            line-height: 40px;
            text-align: center;
            background: #444;
            color: white;
            position: fixed;
            z-index: 111;
            cursor: pointer;
            text-transform: uppercase;
            font-weight: 300;
            letter-spacing: 2px;
            user-select: none;
            -webkit-user-select: none;
            transition: background 0.3s, color 0.3s;
            -webkit-transition: background 0.3s, color 0.3s;
        }
        .clear:hover {
            background: #ddd;
            color: black;
        }
        .clear:active {
            transform: translateX(2px) translateY(2px);
        }
        .clear {
            top: 10px;
            left: 10px;
        }
        #dl {
            color: black;
            width: 70px;
            height: 100px;
            background: #444;
            position: absolute;
            bottom: 0;
            left: 637px;
            line-height: 100px;
            z-index: 111;
            cursor: pointer;
            text-align: center;
            font-weight: 400;
            text-transform: uppercase;
            font-size: 18px;
            box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
        }
        #dl:hover {
            background-color: #e68a00;
            color: white;
            letter-spacing: 2px;
        }
        .menu {
            user-select: none;
            -webkit-user-select: none;
            width: 100%;
            height: 100px;
            position: fixed;
            background: #222;
            bottom: 0;
            overflow: hidden;
        }
        .menu p {
            color: #ddd;
            font-weight: 900;
            letter-spacing: 2px;
            font-size: 14px;
            text-transform: uppercase;
            margin: 0;
            padding: 0;
        }
        .toolbar,
        .sizing,
        .color {
            border-right: 1px solid black;
            padding-top: 10px;
            background: #222;
            z-index: 111;
        }
        .toolbar {
            position: absolute;
            text-align: center;
            width: 170px;
            height: 100px;
            padding-left: 5px;
            border-right: 1px solid black;
        }
        .col-btn,
        li {
            display: inline-block;
            margin: 0 2px 5px 2px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: #444;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            border: 1px solid #111;
        }
        .col-btn:hover,
        li:hover {
            background: white;
            color: black;
        }
        ul {
            width: 100%;
            list-style: none;
            margin: 0;
            padding: 10px 0 0 0;
            color: white;
            text-align: center;
        }
        .active {
            background: #e68a00;
        }
        .active:hover {
            background: #e68a00;
        }
        .sizing {
            position: absolute;
            width: 250px;
            height: 100px;
            text-align: center;
            left: 176px;
        }
        .sizing .slider {
            width: 200px;
            margin: 15px 0 0 0;
        }
        .sizing .size {
            color: #e68a00;
            font-size: 11px;
        }
        .color {
            position: absolute;
            left: 427px;
            height: 100px;
            text-align: center;
            width: 210px;
            color: white;
            overflow: hidden;
        }
        .color p {
            padding: 0px 0;
        }
        .color input {
            width: 200px;
            height: 20px;
            text-align: center;
            font-size: 16px;
            position: absolute;
            right: -210px;
            bottom: 15px;
            background: black;
            color: orange;
            border: none;
            outline: none;
            transition: all 0.7s;
            -webkit-transition: all 0.7s;
        }
        .col-btn {
            margin: 5px 5px;
        }
        .col-active {
            background: #e68a00;
            color: white;
        }
        .col-active:hover {
            background: #e68a00;
            color: black;
        }
        .pick.input-active {
            right: 3px;
        }
        .warning {
            position: absolute;
            right: 10px;
            font-size: 12px;
            width: 150px;
            color: #777;
            letter-spacing: 1px;
            text-align: right;
            text-transform: uppercase;
            bottom: 5px;
            z-index: 1;
        }
        .warning span {
            font-weight: 900;
            font-size: 25px;
            letter-spacing: 2px;
            color: rgba(230, 138, 0, 0.5);
        }
        a {
            text-decoration: none;
        }
    </style>
    <script src="../../js/jquery.js"></script>

</head>
<body>
<!--
  Click and Drag to draw
  TYPES
  'L' - line
  'F' - Fan effect
  'C' - Circle
  'E' - Eraser
  SIZE - adjusts the line width/circle radius
  COLOR
  'R' - Random
  'C' - Accepts either Hex, including the # sign, or the name of a color
  SAVE - saves a JPG of your drawing to your computer
-->
<div class='clear'>Clear</div>
<div class='save'></div>
<div class='menu'>
    <div class='toolbar'>
        <p>Type</p>
        <ul>
            <li class='line active'>L</li>
            <li class='fan'>F</li>
            <li class='circle'>C</li>
            <li class='eraser'>E</li>
        </ul>
    </div>
    <div class='sizing'>
        <p>Size</p>
        <input class='slider' max='60' min='0.2' step='0.1' type='range' value='0.2'>
        <p class='size'></p>
    </div>
    <div class='color'>
        <p>Color</p>
        <div class='random col-btn col-active'>R</div>
        <div class='custom col-btn'>C</div>
        <input class='pick' placeholder='#hex or name' type='text'>
    </div>
    <a download='MyCoolDrawing.jpg' id='dl'>Save</a>
    <div class='warning'><span>Warning</span>
        <br>The canvas will automatically clear if you resize the window</div>
</div>
<canvas id='c'></canvas>
</body>
</html>

<script>
    $(window).on("resize", function() {
        //Class Toggles For Toolbar
        $(".toggle").on("click", function() {
            $(".menu").toggleClass("menu-active");
        });
        $("li").on("click", function() {
            $("li").removeClass("active");
            $(this).addClass("active");
        });
        $(".col-btn").on("click", function() {
            $(".col-btn").removeClass("col-active");
            $(this).addClass("col-active");
            if ($(".custom").hasClass("col-active")) {
                $(".pick").addClass("input-active");
            } else {
                $(".pick").removeClass("input-active");
            }
        });
        //Canvas Stuff
        var c = document.getElementById("c"),
                ctx = c.getContext('2d'),
                ch = (window.innerHeight) - 100,
                cw = window.innerWidth,
                bkg = "#111",
                circleRad = $(".slider").val(),
                down = false,
                downloadLink = $("#dl");
        ctx.lineWidth = $(".slider").val();
        c.width = cw;
        c.height = ch;
        c.style.backgroundColor = bkg;
        $(".size").text($(".slider").val());
        $(".slider").on("input", function() {
            ctx.lineWidth = $(".slider").val();
            circleRad = $(".slider").val();
            $(".size").text($(".slider").val());
        });
        ctx.beginPath();
        //immediately draws a rectangle the size of the canvas so it saves with a background
        ctx.rect(0, 0, cw, ch);
        ctx.fillStyle = bkg;
        ctx.fill();
        downloadLink.on("click", function() {
            var details = c.toDataURL("image/jpeg");
            this.href = details;
        });
        $(window).mousedown(function(e) {
            ctx.beginPath();
            ctx.moveTo(e.pageX, e.pageY);
            down = true;
            var randomCol = "rgba(" + Math.floor(Math.random() * (255)) + "," + Math.floor(Math.random() * (255)) + "," + Math.floor(Math.random() * (255)) + ",0.1)";
            if ($(".pick").hasClass("input-active")) {
                ctx.strokeStyle = $(".pick").val().toString();
                ctx.fillStyle = $(".pick").val().toString();
            }
            //otherwise, set the color to random
            else {
                ctx.strokeStyle = randomCol;
                ctx.fillStyle = randomCol;
            }
        }).mousemove(function(j) {
            if (down) {
                if ($(".eraser").hasClass("active")) {
                    //if the eraser is selected, set the color of the brush to the background color, gives the effect of erasing
                    ctx.strokeStyle = bkg;
                    ctx.lineTo(j.pageX, j.pageY);
                    ctx.stroke();
                } else if ($(".circle").hasClass("active")) {
                    ctx.arc(j.pageX, j.pageY, circleRad, 0, 2 * Math.PI);
                    ctx.fill();
                    ctx.closePath();
                } else {
                    ctx.lineTo(j.pageX, j.pageY);
                    ctx.stroke();
                }
                if ($(".fan").hasClass("active")) {
                    ctx.closePath();
                };
            }
        }).mouseup(function() {
            down = false;
        });
        $(".clear").on("click", function() {
            ctx.clearRect(0, 0, cw, ch);
        });
    }).resize();
</script>
